import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
//import toaster from 'viewsUI/toaster';
import './index.css'
import WangEditor from 'wangeditor'
//import wangEditorI18nLang from './i18nLang';
import Model from '../Model/index'
let richEditor = null;

/*eslint-disable*/
const wangEditor = (props, ref) => {
  let nameRef = ''
  let titleRef = ''
  let unique = Math.random().toString(36).substr(2);
  const [tip, setTip] = useState(false)
  useEffect(() => {
    loadEditor();
    if (props.visible) {
      setContent(props.content || '');
    }
  }, []);
  function getContent () {
    //向服务器发送网络请求，将富文本数据存放到本地数据库中
    fetch('/api1/content', {
      method: "post",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({names: nameRef, title: titleRef, content: richEditor.txt.html() })
    }).then(res => res.json()).then(data => {
      const { status } = data
      if (status === 'success') {
        setTip(true)
        setTimeout(() => {
          setTip(false)
        }, 1200);
      }
    })

  }
  function getContent1 () {
    //向服务器发送网络请求，将富文本数据存放到本地数据库中
    fetch('/api1/content1', {
      method: "post",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({names:nameRef, title: titleRef, content: richEditor.txt.html() })
    }).then(res => res.json()).then(data => {
      const { status } = data
      if (status === 'success') {
        setTip(true)
        setTimeout(() => {
          setTip(false)
        }, 1200);
      }
    })

  }
  function onChange (e) {
    const { target: { value } } = e
    titleRef = value
  }
  function onChange1 (e) {
    const { target: { value } } = e
    nameRef = value
  }
  function getText () {
    return richEditor.txt.text();
  }

  function setContent (content) {
    richEditor.txt.html(content);
    initFocus();
  }

  function initFocus () {
    const $textElem = richEditor.$textElem;
    const $children = $textElem.children();

    if ($children.length) {
      const $first = $children.first();
      richEditor.selection.createRangeByElem($first, false, true);
      richEditor.selection.restoreSelection();
    }
  }

  useImperativeHandle(ref, () => ({
    getContent,
    getContent1,
    getText,
    setContent,
    initFocus,
  }));

  function loadEditor () {
    richEditor = new WangEditor('#toolbar' + unique, '#body' + unique);
    // richEditor.customConfig.menus = [
    //   'head', // 标题
    //   'bold', // 粗体
    //   'fontSize', // 字号
    //   'fontName', // 字体
    //   'italic', // 斜体
    //   'underline', // 下划线
    //   // 'strikeThrough', // 删除线
    //   'foreColor', // 文字颜色
    //   'backColor', // 背景颜色
    //   'link', // 插入链接
    //   'list', // 列表
    //   'justify', // 对齐方式
    //   'quote', // 引用
    //   //'emoticon', // 表情
    //   'image', // 插入图片
    //   // 'table', // 表格
    //   'htmlTable', // 粘贴表格
    //   // 'video', // 插入视频
    //   'code', // 插入代码
    //   'undo', // 撤销
    //   'redo' // 重复
    // ];
    richEditor.create();
  }

  return (
    <>
      <Model isShow={tip} message='提交成功' type='success'></Model>
      <div style={{ width: '80%', height: '30%', marginLeft: '50%', position: 'absolute', top: '12rem', transform: 'translateX(-50%)' }}>
        <input  className="input1" type="text" placeholder="请输入姓名" required onChange={onChange1} />
        <input  className="input1" type="text" placeholder="请输入主题" required onChange={onChange} />
        <div id={'toolbar' + unique} style={{ borderBottom: '1px solid #EBF2FA', fontSize: '14px', padding: '5px 10px', marginBottom: '5px', flex: 'none' }} />
        <div id={'body' + unique} style={{ height: '30rem', wordBreak: 'break-all', whiteSpace: 'normal', flex: 'auto', display: 'flex', flexDirection: 'column', overflow: 'auto' }} />
        <button onClick={getContent} className="input1-button">问题提交</button>
        <button onClick={getContent1} className="input2-button">好文推荐</button>
      </div>
    </>
  );
};

export default forwardRef(wangEditor);